'''
1、定义：是JavaScript的封装，简化了JavaScr编程
2、使用：
     <head>
        #  引入：
        <script src=".\js\jquery-3.7.1.min.js"></script>
        <script>
            # 原生的is
                window.onload = function(){
                    var oDiv = document.getElementById("mydiv");
                    alert(oDiv)
                }
            # jquery入口函数的两种写法：
            # jquery获取标签方式
                $(document).ready(function(){
                    var $mydiv = $("mydiv");
                    alert($mydiv);
                })
            # jquery简化方式
                $(function(){
                    var $mydiv = $("mydiv");
                    alert($mydiv);
                })
        </script>
     </head>
     <body>
        <div id="mydiv">itcast</div>
     </body>
3、jquery选择器
     <head>
        <script src=".\js\jquery-3.7.1.min.js"></script>
        <script>
            # 标签选择器
                $(function(){
                    var $myp = $("p");
                    alert($myp.length);})
            # 类选择器
                $(function(){
                    var $mydiv = $(".mydiv");
                    alert($mydiv.length)})
            # id选择器
                $(function(){
                    var $myid = $("#myid");
                    alert($myid.length);})
            # 层级选择器
                $(function(){
                    var $myid = $("div div p");
                    alert($myid.length);})
            # 属性选择器
                $(function(){
                    var $myid = $("input[type=button]");
                    alert($myid.length);})
        </script>
     </head>
     <body>
        <p>itcast</p>
        <p>itcast</p>
        <div class="mydiv">itcast</div>
        <div id="myid">itcast</div>
         <div>
            <div>
                <p>itcast</p>
            </div>
         </div>
         <input type="button">
         <input type="button" value="">
         <input type="text" name="">
     </body>
4、选择集过滤
     <head>
        <script src=".\js\jquery-3.7.1.min.js"></script>
        <script>
            $(function(){
                 # 获取到标签对象
                    var $mybtn = $("div");
                 # 样式修改
                    $mybtn.css({"height":"100px"});
                 # has方法
                    $mybtn.has("#btn").css({"background":"red"});
                 # eq方法
                    $mybtn.eq(1).css({"background":"blue"});
            })
        </script>
     </head>
     <body>
        <div>
            <input type="button" value="itcast" id="btn">
        </div>
        <div>
            <input type="button" value="heima" class="btn">
        </div>
     </body>
5、选择集转移
     prev()       获取上一个同级元素
     prevAll()    获取上面所有的同级元素
     next()       获取下一个同级元素
     nextAll()    获取下面所有的同级元素
     parent()     获取父元素
     children()   获取所有的子元素
     siblings()   获取其他同级元素
     find()       获取指定选择器的元素
 操作：
       <head>
            <script src=".\js\jquery-3.7.1.min.js"></script>
            <script>
                $(function(){
                    var $mydiv = $("#div");
                      alert($mydiv);
                      $mydiv.prev().css({"color":"red"});
                      $mydiv.next().css({"color":"blue"});
                      $mydiv.find(".span").css({"color":"blue"});
                })
            </script>
       </head>
       <body>
            <h2>这是第一个标签</h2>
            <p>这是第二个标签</p>
            <div id="div">这是<span class="span">第三个</span>标签</div>
            <h2>这是第四个标签</h2>
            <p>这是第五个标签</p>
       </body>
6、获取和设置元素内容：
       <head>
            <script src="./js/jquery-3.7.1.min.js"></script>
            <script>
                $(function(){
                    // 获取标签对象
                        var $myp = $("p");
                        alert($myp);
                    // 获取标签内容
                        var $result = $myp.html();
                        alert($result);
                    // 修改标签内容
                        $myp.html("heima");
                    // 追加新内容
                        $myp.append("加油");
                })
            </script>
       </head>
       <body>
           <p>itcast</p>
       </body>
7、获取和修改元素属性
       <head>
            <script src="./js/jquery-3.7.1.min.js"></script>
            <script>
                $(function(){
                    // 获取标签对象
                        var $myp = $("p");
                    // 获取标签样式
                        var $mypx = $myp.css("font-size");
                        alert($mypx);
                    // 设置标签样式
                        $myp.css({"font-size":"40px"});
                    // 获取标签对象
                        var $mybtn = $("input");
                    // 获取标签属性
                        var $mytype = $mybtn.prop("type");
                        alert($mytype);
                    // 修改标签属性
                        $mybtn.prop({"value":"name"});
                        $mybtn.val("姓名");
                })
            </script>
       </head>
       <body>
           <p>itcast</p>
           <input type="button" value="按钮" id="btn">
       </body>
8、jquery事件
    常用事件
       click()        鼠标单击
       blur()         元素失去焦点
       focus()        元素获得焦点
       mouseover()    鼠标进入
       mouseout()     鼠标离开
       ready()        加载完成
    操作：
      <head>
            <script src="./js/jquery-3.7.1.min.js"></script>
            <script>
                ready()事件
                $(document).ready(function(){
                    alert("1");
                })
                $(function(){
                    // 获取标签对象
                        var $mytext = $("#text1");
                        var $mybtn = $("#btn1");
                    // 鼠标单击
                        $mybtn.click(function(){
                        alert("itcast");
                        })
                    // 元素获取焦点
                        $mytext.focus(function(){
                        // 原生js写法
                            this.style.background = "red";
                        // jquery写法
                            $(this).css({"background":"red"});
                        })
                    // 元素失去焦点
                        $mytext.blur(function(){
                        $(this).css({"background":"white"});
                        })
                    // 鼠标进入
                        var $mydiv = $("div");
                        $mydiv.mouseover(function(){
                        $(this).css({"background":"red"});
                        })
                    // 鼠标离开
                        $mydiv.mouseout(function(){
                        $(this).css({"background":"white"});
                        })
                })
            </script>
      </head>
      <body>
          <input type="text" id="text1">
          <input type="button" value="按钮" id="btn1">
          <div>
              <input type="text" id="text1">
              <input type="button" value="按钮" id="btn1">
          </div>
      </body>
9、事件冒泡
      ① 定义：事件会向它的父级一级一级传递
      ② 操作：
          <head>
            <script src="./js/jquery-3.7.1.min.js"></script>
            <script>
                $(function(){
                    // 获取标签对象
                        var $mydiv1 = $("#div1");
                        var $mydiv2 = $("#div2");
                    // 绑定事件
                        $mydiv1.click(function(){
                        alert("div1 父标签");
                        })
                        $mydiv2.click(function(){
                        alert("div2 子标签");
                        })
                })
            </script>
          </head>
          <body>
              <div id="div1" style="width: 100px; height: 100px; background: red;">
                  <div id="div2" style="background: green;">
                      itcast
                  </div>
              </div>
          </body>
10、事件代理
      ① 定义：利用事件冒泡的原理，把事件加到父级上，通过判断事件来源，执行相应的子元素的操作
      ② 优点：极大减少事件绑定次数，提高性能，可以让新加入的子元素也拥有相同的操作
      ③ 操作：
           <head>
                <script src="./js/jquery-3.7.1.min.js"></script>
                <script>
                    $(function(){
                        // 没有事件代理的写法：
                        // 获取所有的<li>标签对象
                            var $mylist = $("ul li");
                            alert($mylist.length);
                        // 绑定5次事件
                            $mylist.click(function(){
                            $(this).css({"background":"red"});
                            })
                        // 有事件代理的写法：
                        // 获取父标签对象
                            var $mylist = $("ul");
                            alert($mylist.length);
                            $mylist.delegate("li", "click", function(){
                            $(this).css({"background":"red"});
                            })
                    })
                </script>
           </head>
           <body>
               <ul>
                   <li>1</li>
                   <li>2</li>
                   <li>3</li>
                   <li>4</li>
                   <li>5</li>
               </ul>
           </body>
'''